

<style>
  .userManage .option-div{
    height: 35px;
    width: 800px;
    margin-bottom: 20px;
  }
  .userManage button{
    margin-right: 10px;
    float: left;
  }
  .userManage .option-div input{
    background-color: none;
    border: 1px solid #ccc;
    border-radius:5px ;
    height: 32px;
    width: 168px;
    padding-left:15px ;
    color: #ccc;
    border:1px solid #2cb5ac;
  }
  .userManage .option-div .toAdd{
    width: 70px;
    float: left;
  }
  .userManage .option-div .input-user{
    width: 170px;
    float: left;
    margin-right: 30px;
  }
  .userManage .option-div .option-down{
    width: 200px;
    float: left;
    position: relative;
  }
  .userManage .option-div .option-down select{
    width: 170px;
    height: 35px;
    border-radius: 5px;
    border:1px solid #2cb5ac;
  }
  /* .userManage .option-div .option-down i{
    display: block;
    position: absolute;
    left: 160px;
    top: 10px;
  } */
  .userManage .search{
    border: none;
    line-height: 35px;
    background: none;
    font-size: 12px;
    color: #2cb5ac;
  }
  .userManage .userManageTable{
    width: 100%;
    text-align: center;
    color: #777;
    border-collapse: collapse;
  }
  /* .userManage .userManageTable th:last-child{
    text-align: right;
    padding-right: 50px;
  }
  .userManage .userManageTable td:last-child{
    text-align: right;
    padding-right: 10px;
  } */
  .userManage .userManageTable a{
    color: #777;
    font-size: 12px;
  }
/*   .userManage .pagination li{
    float: left;
    width: 22px;
    height: 22px;
    text-align: center;
    line-height: 22px;
    border-radius: 4px;
    color: rgb(78, 77, 77);
    background-color: #f4f4f5;
    font-weight: 700;
    font-size: 12px;
    margin: 5px 3px;
    cursor: pointer;
  }
  .userManage .pagination li:hover{
    color: #2cb5ac;
  } */
.page-div{
      margin-top: 10px;
    }
.page-div *{
    display: inline-block;
      width: 22px;
      height:22px;
      background-color: #f4f4f5;
      border: 1px solid #2cb5ac;
      margin: 0 10px;
      border-radius: 3px;
      text-align: center;
      color: #777;
    } 
  .page-div span:hover, .page-div a:hover{
    color: #2cb5ac;
  }
  </style>
  
  
  <div class="userManage">
    <!-- top部分 -->
    <div class="option-div">
      <div class="toAdd"><button class="btn btn-success">添加</button></div>
      <div class="input-user"><input type="text" placeholder="请输入用户名" ></div>
      <div class="option-down">
        <select name="roles" id="">
          <option disabled selected hidden>请选择角色</option>
          <option value="">教师</option>
          <option value="">学生</option>
          <option value="">管理员</option>
        </select>
      </div>
      <button class="search">搜索</button>
    </div>
    <!-- button部分 -->
   <div>
      <table class="userManageTable table striped">
        <thead >
          <tr>
            <th>序号</th>
            <th>用户名</th>
            <th>姓名</th>
            <th>角色</th>
            <th>性别</th>
            <th>状态</th>
            <th>手机号</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
        </tbody>
      </table>
    </div> 
    <div class="page-div">
  
    </div>
  </div>
  
  
  
  
  <script>
    var userDataModel={
      total:0,
        params:{
              page:1,
              pageSize:10,
              username:'',
              rolename:''}
    }
  //获取全部类别信息
  pageQuery(userDataModel.params);
  
    function pageQuery(params){
      myAjax.get(api.BASEUSER_PAGEQUERY,params).then((res)=>{
        userDataModel.total = res.data.total;
      //清空节点
      $(".userManage tbody").empty();
      console.log(res)
      
      let arr=res.data.list;
      if(arr.length>0){
        arr.forEach((item,index)=>{
          $(".userManage tbody").append($(`
          <tr>
          <td>${index+1}</td>
          <td>${item.username}</td>
          <td>${item.realname}</td>
          <td>${item.roles.map(item=>item.name).join(',')}</td>
          <td>${item.gender=='male'?'男':'女'}</td>
          <td>${item.status}</td>
          <td>${item.telephone}</td>
          <td>
            <a href="#">设置</a>
            <a href="#">移除</a>
            <a href="#">详情</a>
            <a href="#">修改</a>
          </td>
        </tr>`))
        })
      }
    })
  }
  //分页
  setTimeout(()=>{
        $('.page-div').pagination(userDataModel.total,{
        //设置每页显示的条数
        showData:userDataModel.params.pagesize,
        prev_text:'<',
        next_text:'>',
        callback(page){
          console.log(page);
          userDataModel.params.page=page+1;
          pageQuery(userDataModel.params);
        }
      })
      },1000)
  </script>
  
  
  